<script setup>
import {ref, reactive} from 'vue'
// vue3如何用接收数组
const arr = [{ key: '111' }, { key: '222' }]

// 方法1:用reactive,必须用对象,并且有一个属性是数组,用这个数组来接受.
// 如果不嵌套一层,无法接收到数组.

const items = reactive({
    arr: []
})

// 嵌套了一层
items.arr =  arr

// 如果不嵌套一层,无法接收到数组.
// items = arr

// 方法2:用ref接收数组,别忘了.value
const items2 = ref()
items2.value = arr

// 方法3:用push数组的方式
const items3 = reactive([])
for(let i = 0; i < arr.length; i++){
    items3.push(arr[i])
}

</script>

<template>
    <div>
        {{items}}
    </div>

    <li v-for="item in items.arr" :key="item.key">
        {{ item.key }}
    </li>
    ---------
    <div>
        {{items2}}
    </div>

    <li v-for="item in items2" :key="item.key">
        {{ item.key }}
    </li>
    ---------
    <div>
        {{items3}}
    </div>

    <li v-for="item in items3" :key="item.key">
        {{ item.key }}
    </li>
</template>
